<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				background-color: #f6f9fc;
			}
			
			*{
				margin: 0;
				padding: 0;
			}
			
			.main{
				width: 240px;
				height: 500px;
				background-color: #eae9e9;
				margin: 50px auto;
				padding: 20px;
				box-sizing: border-box;
			}
			
			.main .list{
				width: 280px;
			}
			
			.main .list ul{
				list-style: none;
				float: left;
			}
			
			.main .list ul li{
				width: 60px;
				height: 56px;
				margin-right: 10px;
				margin-bottom: 10px;
				border: 1px solid #424242;
				background-color: black;
				color: #f6f9fc;
				text-align: center;
				box-sizing: border-box;
				padding: 5px 0;
				cursor: pointer;
			}
			
			.main .list ul li:nth-child(3n){
				margin-right: 0;
			}
			
			.main .list ul li p:first-child{
				font-size: 20px;
				font-weight: 500;
			}
	
			.main .list ul li p:last-child{
				font-size: 14px;
			}
			
			.main .list ul li:hover{
				border: 1px solid #424242;
				color: #e84a7e;
				background-color: white;
			}
			
			.main .content{
				width: 200px;
				height: 120px;
				background-color: #f1f1f1;
				border: 1px solid white;
				padding: 18px;
				box-sizing: border-box;
				overflow: hidden;
			}
			
			.main .content .month{
				margin: 2px 0 0 0;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="list">
				<ul>
					<li>
						<p>1</p>
						<p>JAN</p>
					</li>
					<li>
						<p>4</p>
						<p>JAN</p>
					</li>
					<li>
						<p>7</p>
						<p>JAN</p>
					</li>
					<li>
						<p>10</p>
						<p>JAN</p>
					</li>
				</ul>
				<ul>
					<li>
						<p>2</p>
						<p>JAN</p>
					</li>
					<li>
						<p>5</p>
						<p>JAN</p>
					</li>
					<li>
						<p>8</p>
						<p>JAN</p>
					</li>
					<li>
						<p>11</p>
						<p>JAN</p>
					</li>
				</ul>
				<ul>
					<li>
						<p>3</p>
						<p>JAN</p>
					</li>
					<li>
						<p>6</p>
						<p>JAN</p>
					</li>
					<li>
						<p>9</p>
						<p>JAN</p>
					</li>
					<li>
						<p>12</p>
						<p>JAN</p>
					</li>
				</ul>
			</div>
		
			<div class="content">
				<p class="month">1月活动</p>
				<p>快过年了</p>
			</div>
		</div>
			
		
	</body>
</html>